<script setup>
import TreeMenu from '@/components/TreeMenu.vue';
// import { useRouter } from 'vue-router';

import { useCounterStore } from "@/stores/menu.js"
const CounterStore = useCounterStore()

// const router = useRouter()
// import { reactive } from 'vue';
// const meauDate = reactive(router.options.routes[0].children)


import { getmenupermissions } from "@/api/index.js"
import {  onMounted, ref } from 'vue'

 const listdata = ref([])

 onMounted(async () => {
  const res = await getmenupermissions()
  listdata.value = res.data.data
})



const active = ref('')

onMounted(() => {
  active.value = localStorage.getItem('menuActive')
})
const handleOpen = () => {}
const handleClose = () => {}
</script>

<template>
        <el-menu
        :style="{ width: !CounterStore.isCollapse ? `230px` : '90px' }"
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu"
        :default-active="active"
         :collapse="CounterStore.isCollapse"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"

      >
      <p class="logo-lg">{{ !CounterStore.isCollapse ? `DIDI陪诊` : 'DIDI' }}</p>
        <TreeMenu :index="1" :listdata="listdata"></TreeMenu>
      </el-menu>
</template>

<style lang="less" scoped>
  .el-menu{
    height: 100%;
    .logo-lg{
      font-size: 20px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: aliceblue;
    }
  }
</style>






